<template>
  <div>
    <div class="table-data" v-show="tabShow">
      <div class="table-state">
        <el-button size="small" type="primary" @click="handleAdd(1,2)"><i class="el-icon-plus"></i>添加权限</el-button>
      </div>
      <!-- show-checkbox -->
      <el-tree
      :data="treeData"
      
      node-key="id"
      default-expand-all
      :expand-on-click-node="false"
      v-loading="loading"
      element-loading-text="正在加载">
      <span class="custom-tree-node" slot-scope="{ node, data }">
        <span>{{data.name}}</span>
        <span>所属模块 - {{data.module_str}}</span>
        <span>
          <el-button
            type="text"
            size="mini"
            @click="() => handleEdit(data)">
            编辑
          </el-button>
          <el-button
            type="text"
            size="mini"
            @click="() => handleAdd(2,data)">
            新增
          </el-button>
          <el-button
            type="text"
            size="mini"
            class="danger"
            @click="() => handleRemove(node, data)">
            删除
          </el-button>
        </span>
      </span>
    </el-tree>
    </div>
    <EditDialog :moduleList="moduleList" :isEdit="isEdit" :isAdd="isAdd" :key="timer" :isMenu="isMenu" :form="formData" @closeDialog="closeDialog" @loadData="loadData"></EditDialog>
  </div>
</template>

<script lang="ts">
let id = 1000
import { Component, Vue, Provide,Prop,Watch } from "vue-property-decorator";
import systemApi from "@/api/system";
import EditDialog from "./EditDialog.vue";
// import { State, Getter, Mutation, Action } from "vuex-class";
@Component({
  components: { EditDialog}
})
export default class TableData extends Vue {
  // @Getter("user") getUser: any;
  @Provide() moduleList: any= {}
  @Provide() tabShow: Boolean = true; // 是显示否列表页面
  @Prop({}) tabVisible!: any;
  @Provide() isAdd: Boolean = false; // 是否展示添加弹窗
  @Provide() isEdit: Boolean = false; // 是否展示编辑弹窗
  @Provide() isMenu: Boolean = false; // 是否为菜单
  @Provide() timer: any = '';
  @Provide() loading: Boolean = true; // 是否显示加载图标
  @Provide() formData:any={
    id:"",
    name: "",
    is_menu:0,
    icon:"",
    parent_id:"",
    remark:"",
    route_path:"",
    path:"",
    module_id:''
  }
  @Provide() treeData:any = []
  @Watch("$route") handleRouteChange(to: any,form:any) {
    if(form.path!='/systemList'){
      this.tabShow=this.tabVisible;
    }
  }
  // 新建
  handleAdd(i,data) {
    this.isAdd=true;
    this.isEdit=true;
    this.isMenu=false
    this.formData={id:"",name: "",is_menu:0,icon:"",parent_id:"",remark:"",route_path:"",path:""}
    if(i==1){
      this.formData.parent_id=0
    }else{
      this.formData.parent_id=data.id
    }
    this.timer = new Date().getTime();
  }
  // 删除
  handleRemove(node, data) {
    this.$confirm('此操作将永久删除----'+data.name+'----权限,是否继续？', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      closeOnClickModal:false
    }).then(() => {
      systemApi.removeSystem({id:data.id})
      .then((res: any) => {
        if(res.data.status){
          this.$message({
            message: '操作成功',
            type: "success"
          });
          this.loadData();
        }
      });
    }).catch(() => {
      this.$message({
        type: 'info',
        message: '已取消删除'
      });          
    });
    
  }
  // 关闭弹窗
  closeDialog() {
    this.isAdd = false;
    this.isEdit = false;
  }
  // 编辑
  handleEdit(row: any){
    this.timer = new Date().getTime();
    this.isEdit=true;
    this.formData=row;
    console.log(row);
    if(row.is_menu==1){
      this.isMenu=true
    }else{
      this.isMenu=false
    }
  }
  created() {
    this.loadData();
    if(this.$route.path!='/systemList'){
      this.tabShow=false
    }
  }
  loadData() {
    systemApi.systemList()
      .then((res: any) => {
        if(res.data.data){
          this.treeData=res.data.data
          this.loading=false
        }
    });
    systemApi.permissionmodulelist()
      .then((res:any)=>{
        this.moduleList = res.data.data
      })
  }
}
</script>

<style lang="scss" scoped>
.el-date-editor{
  margin-right: 10px;
}
</style>
